<template>
  <scroll-view class="switch-bar" :show-scrollbar="false" :scroll-x="true" :style="{background:bgc,top: top}">
  	<!-- <view class="switch-item"> 筛选 </view> -->
    <view 
			:class="switchIndex==item.id?'a-switch-item':''" 
			v-for="(item, index) in arr" 
			@tap="tapSwitch(item.id)" 
			class="switch-item" 
			:key="item"
		> 
			{{ item.name }} 
		</view>
  </scroll-view>
</template>

<script setup>
	import { computed, ref } from 'vue';
  const { safeArea } = uni.getSystemInfoSync()
	const emit = defineEmits(['tapSwitch'])
	const props = defineProps({
		bgc: {
			type: String,
			default: '#f4f5f7'
		},
		arr: {
			type: Array,
			default: []
		},
    p_top: {
      type: Number,
      default: 0
    }
	})
	const switchIndex = ref(props.arr[0]?.id)
	const tapSwitch = (id) => {
		switchIndex.value = id
		emit('tapSwitch', id)
	}
  const top = computed(() => {
		return (safeArea.top + props.p_top) + 'px'
	})
	defineExpose({
		switchIndex
	})
</script>

<style lang="scss" scoped>
	.switch-bar {
    position: sticky;
    z-index: 999;
		padding: 0 12px;
		box-sizing: border-box;
	  white-space: nowrap;
		// background-color: red;
	  .switch-item {
	    display: inline-block;
			color: #555555;
			font-size: 14px;
			font-weight: 400;
	    padding: 0px 3px;
			line-height: 38px;
			margin-right: 20px;
			position: relative;
			&:nth-last-of-type(1) {
				margin-right: 0;
			}
			&.a-switch-item {
				color: #FF3B1E;
				font-size: 16px;
				font-weight: 500;
				&::before {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					display: block;
					content: '';
					width: 26px;
					height: 4px;
					background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
					border-radius: 33px;
				}
			}
	  }
	}
</style>